import React, { Component } from 'react'
import ReactDOM from 'react-dom'

export default class App extends Component {
  state = {
    username: 'xxx',
    content: '',
    frame: 'vue',
    sex: 'male',
    checkbox: ['apple']
  }
  HandleChange = (e) => {
    let v
    const {value,name,type,} = e.target
    const {checkbox} = this.state
    type === 'checkbox' ? (checkbox.includes(value) ?  v = [ ...checkbox].filter(item =>(item !== value)): v = [...checkbox, value]) : v = value
    this.setState({
      [name]: v
    })
  }
  render () {
    const { username, content, frame, sex, checkbox } = this.state
    return (
      <ul>
        <li>
          <label hemlfor='username'>用户名</label>
          <input id='username' name='username' type='text' value={username} onChange={this.HandleChange}></input>
        </li>
        <li>
          <label hemlfor='content'>其他信息</label>
          <textarea id='content' name='content' type='text' value={content} onChange={this.HandleChange}
            cols='30'
            rows='10'
          ></textarea>
        </li>
        <li>
          <label hemlfor='frame'>框架</label>
          <select id='frame' name='frame' value={frame} onChange={this.HandleChange}>
            <option value='react'>React</option>
            <option value='vue'>Vue</option>
            <option value='angular'>Angular</option>
          </select>
        </li>
        <li>
          <input type='radio' name='sex' id='male' value='male' checked={sex === 'male'} onChange={this.HandleChange}></input>
          <label hemlfor='male'>男</label>

          <input type='radio' name='sex' id='female' value='female' checked={sex === 'female'} onChange={this.HandleChange}></input>
          <label hemlfor='female'>女</label>

          <input type='radio' name='sex' id='unkonw' value='unkonw' checked={sex === 'unkonw'} onChange={this.HandleChange}></input>
          <label hemlfor='unkonw'>未知</label>
        </li>

        <li>
          {/* 当 checkbox 数组里面包含 'apple' 应该选中 */}
          <input type='checkbox' name='checkbox' id='apple' value='apple' checked={checkbox.includes('apple')} onChange={this.HandleChange}></input>
          <label hemlfor='apple'>Apple</label>
          <input type='checkbox' name='checkbox' id='orange' value='orange' checked={checkbox.includes('orange')} onChange={this.HandleChange}></input>
          <label hemlfor='orange'>Orange</label>
        </li>
      </ul>
    )
  }
}

ReactDOM.render(<App />, document.querySelector('#react'))